<!-- todo 缺少移除功能 -->
<template>
  <div class="image-item">
    <a-icon type="close" @click.prevent="remove()" v-if="canRemove" />
    <div class="item-left">
      <oss-multiple-image :max-length="1" :file-list="fileList" @filesChange="fileChange" />
      <!--<upload accept=".jpg, .jpeg, .png" :before-upload="beforeUpload" @change="fileChange" :file-list="fileList" />-->
    </div>
    <div class="item-right">
      <div class="title">
        <label>标题</label><input type="text" placeholder="标题" v-model="iTitle">
      </div>
      <div class="link">
        <label>链接</label>
        <link-selection />
      </div>
    </div>
  </div>
</template>

<script>
  // import oss from '@/components/OSS/oss'
  import OssMultipleImage from '@/components/OSS/OssMultipleImage'
  import Upload from '@/components/Draggable/other/Upload'
  import LinkSelection from '@/components/Draggable/other/LinkSelection'
  import { v4 as uuidv4 } from 'uuid'
  export default {
    name: 'ImageItem',
    // mixins: [oss],
    props: {
      imgSrc: {
        type: String,
        default: ''
      },
      title: {
        type: String
      },
      index: {
        type: Number,
        required: true
      },
      canRemove: {
        type: Boolean,
        default: true
      }
    },
    components: {
      OssMultipleImage,
      LinkSelection,
      Upload
    },
    computed: {
      iTitle: {
        get () {
          return this.title
        },
        set (val) {
          this.$emit('update:title', val)
        }
      },
      fileList () {
        const uuid = uuidv4()
        return this.imgSrc ? [{
          uid: uuid,
          name: uuid,
          url: this.imgSrc
        }] : undefined
      }
    },
    data () {
      return {
        // fileList: []
      }
    },
    methods: {
      fileChange (files) {
        // this.fileList.splice(0, this.fileList.length, ...files)
        this.$emit('update:imgSrc', files[0] && files[0].url)
      },
      beforeUpload (file) {
        console.log(file)
        return false
      },
      remove () {
        this.$emit('remove', this.index)
      }
    }
  }
</script>

<style lang="less">
  .image-item {
    height: 100px;
    width: 100%;
    .item-left {
      float: left;
      width: 78px;
      height: 78px;
      .ant-upload.ant-upload-select-picture-card {
        width: 78px;
        height: 78px;
      }
      .ant-upload-list-item {
        width: 78px;
        height: 78px;
      }
    }
    .item-right {
      float: left;
      margin-left: 5px;
      label {
        margin-right: 5px;
      }
      input {
        border: 1px solid #DFE1E3;
        &:focus {
          outline: none;
          border-color: #155BD4;
        }
      }
    }
  }
</style>
